<template>

	<div class="DateQuantumPicker">
		<div class="pl_fiexdCon" v-show="isShowFixed" @click="_ChengePicker(false)">
			<div class="pl_contnet" :class="modalTranstion?'pl_fiexdConActive':''" @click.stop="_modal">
				<div class="pl_btnCn">
					<div class="pl_close" @click="_ChengePicker(false)">取消</div>
					<div class="pl_confirm" @click="_Emit" style="color: {subjectColor}">确定</div>
					<div class="clear"></div>
				</div>
				<div class="pl_valCn">
					<div class="child" :class="isStart ? 'active':''" @click="_NavChange(true)">
						<div>开始时间</div>
						<div>{{s_y}}.{{s_m}}.{{s_d}}</div>
					</div>

					<div class="child"  :class="!isStart ? 'active':''" @click="_NavChange(false)">
						<div>结束时间</div>
						<div>{{e_y}}.{{e_m}}.{{e_d}}</div>
					</div>
					<div class="clear"></div>
				</div> 
				<div class="pl_pickerCn">
					<picker-view indicator-style="height: 80rpx;"  class="picker-view" :value="value" @change="_bindChange">
						<picker-view-column>
							<div v-for="item in years" :key="item" class="child left">{{item}}年</div>
						</picker-view-column>
						<picker-view-column>
							<div v-for="item in months" :key="item" class="child">{{item}}月</div>
						</picker-view-column>
						<picker-view-column>
							<div v-for="item in days" :key="item" class="child right">{{item}}日</div>
						</picker-view-column>
					</picker-view>
				</div>
			</div>
		</div>
		<div @click="_ChengePicker(true)" class="showBtn">
			<slot></slot>
		</div>
	</div>
</template>
<script>
import myModule from "@/utils/myModule";
const myString = myModule.get("myString");
import mpvue from '@/utils/mpvue';
	export default{
		name:'DateQuantumPicker',
		data(){
			return{
				modalTranstion:false,
				isShowFixed:false,
				isStart:true,
				year:'',
				month:'',
				day:'',
				years:[],
				months:[],
				days:[],
				s_y:'00',
				s_m:'00',
				s_d:'00',
				e_y:'00',
				e_m:'00',
				e_d:'00',
				value:[0,0,0]
			}
		},
		watch:{
			isShowFixed(val){
				if (val) {
					mpvue.hideTabBar()
				}else{
					mpvue.showTabBar()

				}
			},
		},
		props:{
			startYear:{
				type:String,
				default:'2000'
			},
			endYear:{
				type:String,
				default:'2050'
			},
			subjectColor:{
				type:String,
				default:'#FF4071'
			}
		},
		methods:{
			_modal(){
				return
			},
			_Emit(){
				let startTime =  this.s_y+'/'+this.s_m+'/'+this.s_d
				let endTime =  this.e_y+'/'+this.e_m+'/'+this.e_d
				let stimeCode = new Date(startTime).getTime()
				let etimeCode = new Date(endTime).getTime()

				if (startTime == "00/00/00" || isNaN(stimeCode)) {
					mpvue.showToast({title: "请选择开始时间"})
					this.isStart = true
					
					return
				}
				if (endTime == "00/00/00" || isNaN(etimeCode)) {
					this.e_y = this.s_y
					this.e_m = this.s_m
					this.e_d = this.s_d
					mpvue.showToast({title: "请选择结束时间"})
					this.isStart = false
					return
				}

				if (stimeCode > etimeCode && stimeCode != etimeCode) {
					mpvue.showToast({title: "结束时间需在束时间之后"})
					this.isStart = false
					return
				}else{
					let stime = startTime.replace(/\//g, '.')
					let eTime = endTime.replace(/\//g, '.')
					this.$emit('confirm', {startTime:stime,endTime:eTime})
					this.isShowFixed = false


				}
			},
			_ChengePicker(boolean){
				if (boolean) {
					this.isShowFixed = boolean

					this.isStart = true
					this.reset()
					this._initData(this.startYear, this.endYear)
					this.isShowFixed = boolean
					setTimeout(()=>{
						this.modalTranstion = boolean
					},100)
				}else{
					this.modalTranstion = false
					setTimeout(()=>{
						this.isShowFixed = boolean
					},100)
				}
			},
			_NavChange(boolean){
				this.isStart = boolean
			},
			_bindChange: function(e) {
				const val = e.target.value
				this.value = val
				let days = this._conputeDay(this.years[val[0]],this.months[val[1]])
				if (this.isStart) {
					this.s_y = this.years[val[0]]
					this.s_m = this.months[val[1]]
					this.s_d = this.days[val[2]]
				}else{
					this.e_y = this.years[val[0]]
					this.e_m = this.months[val[1]]
					this.e_d = this.days[val[2]]
				}
				this.year =  this.years[val[0]]
				this.month =  this.months[val[1]]
				this.day =  this.days[val[2]]
				this.days = days
			},
			_conputeDay(year, month){
				let Cdays = [];
				let arr = [1,3,5,7,8,10,12];
				let isLeapYear = (year % 4 == 0) && (year % 100 != 0 || year % 400 == 0);
				let dayNumber = month == 2 ? (isLeapYear ? 29 :28) :(arr.indexOf(month) != -1 ? 31:30);
				for (let i = 1 ; i <= dayNumber; i++) {
					Cdays.push(myString.preFixAny(i, 2))
				}
				return Cdays
			},
			_initData(staer, end){
				const date = new Date()
				let year = date.getFullYear()
				let month = myString.preFixAny(date.getMonth()+1, 2)
				let day = myString.preFixAny(date.getDate(), 2)
				let years = []
				let months = []
				let days = this._conputeDay(year, month)
				for (let i = staer; i <= end; i++) {
					years.push(i)
				}
				for (let i = 1 ; i <= 12; i++) {
					months.push(myString.preFixAny(i, 2))
				}

				this.year = year
				this.month = month
				this.day = day
				this.years = years
				this.months = months
				this.days = days
				this.s_y = year
				this.s_m = month
				this.s_d = day
				this.value[0] =  year - staer,
				this.value[1] =  month-1,
				this.value[2] =  day-1

			},

			reset(){

				this.s_y = '00'
				this.s_m = '00'
				this.s_d = '00'

				this.e_y = '00'
				this.e_m = '00'
				this.e_d = '00'

				this.value = [0,0,0]
				this._initData(this.startYear, this.endYear)

			},
		},
		created(){
		}
	}
</script>
<style scoped lang="scss">
/* plugin/components/DateQuantumPicker.mpvuess */
.showBtn{
	width: 100%;
	height: 100%;
}
.picker-view{
	width: 100%; height: 345rpx;
}

.picker-view .child{
	color: #000; line-height: 80rpx; font-size: 26rpx; text-align: center;
}

.picker-view .left{
	padding-left: 150rpx;
}
.picker-view .right{
	padding-right: 150rpx;
}
.clear{
	clear: both;
}
.pl_fiexdCon,
.pl_fiexdCon view{
	box-sizing: border-box;
	margin:0;
	padding: 0;

}
.pl_fiexdCon{
	position: fixed;
	top:0;
	left: 0;
	right:0;
	bottom:0;
	background-color: rgba(0,0,0,0.7);
	z-index: 9999;

}

.pl_contnet{
	position: absolute;
	bottom:0;
	left: 0;
	right: 0;
	height: 521rpx;
	background-color: #fff;
	transition: all 0.2s;
	transform: translate(0, 521rpx)

}
.pl_fiexdConActive{
	transform: translate(0, 0)
}

.pl_btnCn{
	height: 88rpx;
	width: 100%;
	line-height: 88rpx;
	text-align: center;

}

.pl_btnCn .pl_close,
.pl_btnCn .pl_confirm{
	width: 180rpx;
	height: 100%;
	font-size: 30rpx;
}
.pl_btnCn .pl_close{
	float: left;
	color: #9A9AA9;
}

.pl_btnCn .pl_confirm{
	float: right;
	color: #FF4071;
}


.pl_valCn{
	width: 100%;
	height: 88rpx;
	text-align: center;
}

.pl_valCn .child{
	width: 50%;
	float: left;
	height: 100%;
	font-size: 26rpx;
	color: #FF4071;
	background-color: #FAFAFA;
	line-height: 44rpx;


}

.pl_valCn .active{
	background-color: #FF4071;
	color: #fff;
}


.pl_valCn .child .v{
	margin-top: 8rpx;
}

.pl_fiexdCon .pl_pickerCn{
	width: 100%;
	height: 345rpx;

}


</style>